@extends('layouts.system')

@section('css')
    <style type="text/css">
        .btnDiv
        {
            margin-right: 25px;
            float: left;
        }

        .btnDiv button
        {
            width: 90px;
            border-radius: 5px;
            margin: 5px;
        }

        .tableDiv
        {
            padding: 20px 20px 50px 20px;
            background-color: #d7d7d7;
            width: 700px;
            text-align: center;
        }

        .tableDiv table
        {
            width: 400px;
        }

        .tableDiv table tr
        {
            background-color: #fff;
            text-align: center;
        }

        .tableDiv table th
        {
            text-align: center;
        }


        .msgDiv
        {
            float: left;
            background-color: #d7d7d7;
        }

        .msgDiv .infoItem
        {
            margin: 10px 0;
            line-height: 34px;
        }

        .msgDiv .infoItem .desc
        {
            width: 140px;
            font-size: 16px;
            color:#000;
            padding: 0;
            background-color: #fff;
        }
        .msgDiv .infoItem .desc li
        {
            padding: 0 10px 0 10px;
            cursor: pointer;
        }

        .msgDiv .infoItem .desc .active
        {
            background-color: #3576ec;
        }

        .msgDiv .infoItem .desc .active a
        {
            color: #fff;
        }

        .msgDiv .infoItem .desc a
        {
            display: block;
            line-height: 28px;
        }

        .msgDiv .infoItem .value
        {
            width: calc( 100% - 140px);
        }

        #msgContent
        {
            padding:10px;
            background-color: #fff;
            min-height: 150px;
        }

        #msgContent .light
        {
            color: #0034fd;
            line-height: 28px;
        }

        .msgDiv .nextDiv
        {
            margin: 35px;

        }

        .msgDiv .nextDiv button
        {
            width: 90px;
            border-radius: 5px;
            margin: 5px;
        }




        .descDiv
        {
            float: left;
            margin-left: 20px;
        }

        .descDiv p
        {
            margin-bottom: 0;
        }

        .descDiv p:first-child
        {
            font-weight: bold;
            font-size: 18px;
        }

        .descDiv p span
        {
            color: #0034fd;
        }


        .userDiv
        {
            float: left;
            display: none;
        }

        .selDiv
        {
            width: 100px;
            padding: 0;
        }

        .selDiv button
        {
            width: 90px;
            border-radius: 5px;
        }

        @media (max-width: 768px)
        {
            .tableDiv
            {
                width: 100%;
            }

            .tableDiv table
            {
                width: 100%;
            }
        }

    </style>
@endsection

@section('content')
    <div id="cl-wrapper" class="fixed-menu">

        <div class="container-fluid" id="pcont">
            <div class="col-md-12" style="padding-right: 0;">
                <div class="block-flat">
                    <div class="header">
                        <div class="pull-left">
                            <p class="jb_underline">提现审核&#62;&#62;权限功能</p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content">
                        <div class="btnDiv">
                            <div>
                                <button type="button" class="btn btn-default" onclick="myPower()">我的权限</button>
                            </div>
                            <div>
                                <button type="button" class="btn btn-default" onclick="sendMsg()">群发消息</button>
                            </div>
                            <div>
                                <button type="button" class="btn btn-default" onclick="msgTrigger()">消息触发</button>
                            </div>
                        </div>

                        <div class="msgDiv col-sm-6">
                            <div class="col-sm-12 infoItem">
                                <div class="col-sm-3 desc">
                                    <li v-for="(item,index) in lists" v-on:click="changeMsg(index)" v-bind:class="{ active: active_id==index }">
                                        <a>@{{ item.title }}</a>
                                    </li>
                                </div>
                                <div class="col-sm-9 value">
                                    <textarea v-model="active_msg" id="msgContent" class="form-control" style="min-height: 150px;"></textarea>
                                </div>
                            </div>

                            <div class="pull-right nextDiv">
                                <button v-on:click="save()" type="button" class="btn btn-default">提交</button>
                            </div>
                        </div>

                        <div class="descDiv">
                            <p>关联词缀：</p>
                            <p>用户名：<span>${user_name}</span></p>
                            <p>用户id：<span>${user_id}</span></p>
                            <p>任务名：<span>${mission_name}</span></p>
                            <p>任务id：<span>${mission_id}</span></p>
                            <p>提现申请id：<span>${cash_id}</span></p>
                        </div>

                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript">

      function sendMsg() {
        window.location.href = '/admin/manager/sendMsg';
      }
      function msgTrigger() {
        window.location.href = '/admin/manager/msgTrigger';
      }
      function myPower() {
        window.location.href = '/admin/manager/myPower';
      }

      Vue.use(VueResource)
      var vm = new Vue({
        el: '#pcont',
        data: {
          active_id: 0,
          active_msg: '',
          lists: {}
        },
        created: function () {
          getLists(this);
        },
        methods: {
          changeMsg: function (index) {
            this.active_id = index;
            this.active_msg = this.lists[index]['messages'];
          },
          save: function () {
            save(this)
          }
        }
      })

      function getLists(_vm) {
        _vm.$http.get('/admin/manager/getTriggerLists')
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              _vm._data.lists = json.data.lists;
              _vm._data.active_msg = json.data.lists[_vm._data.active_id]['messages'];
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

      //封禁用户
      function save(_vm) {
        var data = {
          id: _vm.lists[_vm.active_id]['id'],
          messages: _vm.active_msg
        }
        _vm.$http.post('/admin/manager/saveTrigger', data, {headers: header()})
          .then(function (response) {
            var json = response.body;
            if (json.state == 1) {
              alert('操作成功')
              getLists(_vm)
            }
          })
          .catch(function (response) {
            console.log(response)
          })
      }

    </script>
@endsection